<template>

    <div class="user-info-card">

        <div class="c1">
            
            <span>世界上最美的星辰住在你眼里</span>

        </div>
        
        <div class="c2">
            <img :src="imgurl" width="100px" height="100px">
        </div>


        <div class="c3"></div>



    </div>

</template>


<script setup>

import { ref,defineProps } from "vue"
const props = defineProps({
    imgurl:String
})
</script>


<style lang="scss" scoped>

.user-info-card {
    height: 100%;
    .c1 {
        // background-color: #F1FCCD;
        height: 40%;
        background-image: url("/src/assets/img/flower.png");
        span {
            display: inline-block;
            margin-top: 20px;
            margin-left: 232px;
            font-size: 20px;
            font-family: 'Courier New', Courier, monospace;
            color: whitesmoke;
        }
    }
    .c2 {
        width: 100px;
        height: 100px;
        float: auto;
        left: 312px;
        top:-50px
    }
    .c3 {
        // background-color: pink;
        height: 40%;
    }
}

</style>